<template>
  <a-drawer
    class="tag-drawer"
    :width="400"
    :title="drawerTitle"
    :closable="true"
    :placement="'right'"
    :visible="show"
    @close="handleClose"
    :maskClosable="true"
  >
    <div class="content-class">
      <a-form
        :model="form"
        labelAlign="left"
        ref="formRef"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 24 }"
        :layout="'horizontal'"
        :colon="false"
        :rules="rules"
      >
        <a-form-item label="名称" name="title">
          <a-textarea v-model:value="form.title" placeholder="可添加多个标签，标签间请用;隔开" allow-clear auto-size />
        </a-form-item>
      </a-form>
    </div>
    <div class="footer-class">
      <a-button type="dashed" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts">
import { toRefs, defineComponent, reactive, ref } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "TagDrawer",
  components: {
    CloseOutlined,
  },
  emits: ["refresh"],
  setup(_, { emit }) {
    const show = ref(false);
    const dataProps = reactive({
      drawerTitle: "添加标签",
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      form: {
        title: "",
      },

      dataSource: [] as any,
    });
    const formRef = ref(null) as any;
    const headerDataSource = ref([] as any);

    const openDrawer = (drawerTitle: string, dataSource: any, headerDataSource: any) => {
      show.value = true;
      dataProps.drawerTitle = drawerTitle;
      dataProps.dataSource = dataSource;
      headerDataSource.value = headerDataSource;
      console.log("dataSource===", dataSource);
      console.log("headerDataSource===", headerDataSource.value);
    };

    const handleClose = () => {
      show.value = false;
    };
    const onClose = () => {
      formRef.value.resetFields();
      formRef.value.clearValidate();
      handleClose();
    };
    const onSubmit = () => {
      dataProps.form.title = dataProps.form.title.trim();
      formRef.value
        .validate()
        .then(() => {
          configDataSource();
        })
        .catch((err: any) => console.error(err));
    };

    const configDataSource = () => {
      console.log("headerDataSource===", headerDataSource.value);

      const tagList = dataProps.form.title.split(";");
      // if (headerDataSource.value.length == 0) {
      //   message.error("请先添加表头");
      //   return;
      // }
      tagList.forEach((item: any) => {
        if (item) {
          console.log("item===", item);
          const exists = dataProps.dataSource.some((element: any) => element.title === item);
          if (!exists) {
            // for (let index = 0; index < headerDataSource.value.length; index++) {
            // const element = headerDataSource.value[index];
            // console.log("element===", element);
            dataProps.dataSource.push({
              key: item,
              title: item.trim(),
              // [element.key]: [],
            });
            // }
          }
        }
      });
      message.success("创建成功");
      console.log("创建成功===", dataProps.dataSource);
      onClose();
      emit("refresh", dataProps.dataSource);
    };

    return {
      show,
      headerDataSource,
      ...toRefs(dataProps),
      openDrawer,
      handleClose,
      onClose,
      onSubmit,
      formRef,
    };
  },
});
</script>

<style lang="less" scoped>
.tag-drawer {
  .content-class {
  }
  .footer-class {
    border-top: 1px solid #f0f0f0;
    padding: 10px;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 400px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}
</style>
